<template>
  <el-card style="width: 90%">
    <template #header>
      <wave-flex-box align-items="center" justify-content="space-between">
        <span>个人信息</span>
        <el-space>
          <user-info-modify-card/>
          <el-tooltip
              content="个人设置"
              placement="top">
            <el-button plain :icon="Setting"/>
          </el-tooltip>
        </el-space>
      </wave-flex-box>
    </template>
    <div class="infoBox">
      <el-space :size="20" direction="vertical">
        <user-avatar/>
        <h3>
          {{ userStore.userInfo.username }}
        </h3>
        <el-tag type="primary">Lv {{ userStore.userInfo.level }}</el-tag>
        <el-text v-if="Func.isEmpty(userStore.userInfo.desc)">暂无个人简介</el-text>
        <el-text truncated line-clamp="2">{{ userStore.userInfo.desc }}</el-text>
        <el-space>
          <el-text> ID:{{ userStore.userInfo.id }}</el-text>
          <el-button @click="copyID" text circle :icon="CopyDocument"/>
        </el-space>
      </el-space>
    </div>
  </el-card>
</template>
<script setup>
import {useUserStore} from "@/store/index.js";
import {
  CopyDocument, Edit, Setting
} from '@element-plus/icons-vue'
import {$Clipboard} from '@smallwei/avue'
import {ElMessage} from "element-plus";

import UserInfoModifyCard from "@/views/system/user/components/UserInfoModifyCard.vue";
import Func from "@/utils/Utils.js";

import WaveFlexBox from "@/component/WaveFlexBox.vue";
import UserAvatar from "@/views/component/UserAvatar.vue";

const userStore = useUserStore();

const copyID = () => {
  $Clipboard({
    text: userStore.userInfo.id
  }).then(() => {
    ElMessage.success('复制成功')
  }).catch(() => {
    ElMessage.error('复制失败')
  });
}
</script>
<style scoped>
.infoBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>